<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
/* js交互代码 */

// 定义用户列表响应式变量
const userList = ref([]);

// 定义查询表单响应式变量
const name = ref("");
const gender = ref("");
const job = ref("");

//定义查询方法
const search = () => {
  //  利用axios发送异步请求，使用模板字符串拼接参数
  axios
    .get(
      `https://web-server.itheima.net/emps/list?name=${name.value}&gender=${gender.value}&job=${job.value}`
    )
    .then((response) => {
      //  处理响应数据
      userList.value = response.data.data;
    })
    .catch((error) => {
      //  处理错误
      console.log(error);
    });
};
// 定义清空函数
const clear = () => {
  //  清空查询表单
  name.value = "";
  gender.value = "";
  job.value = "";
  //  调用查询方法，获取用户列表
  search();
};

// 钩子函数
onMounted(() => {
  // 组件挂载完成后，调用查询方法，获取用户列表
  search();
});
</script>

<template>
  <!-- HTML -->

  <div id="app">
    <div id="center">
      姓名:
      <input type="text" name="name" placeholder="请输入姓名" v-model="name" />

      性别:
      <select name="gender" v-model="gender">
        <option value="1">男</option>
        <option value="2">女</option>
      </select>

      职位:
      <select name="job" v-model="job">
        <option value="1">班主任</option>
        <option value="2">讲师</option>
        <option value="3">学工主管</option>
        <option value="4">教研主管</option>
        <option value="5">咨询师</option>
      </select>

      <button class="btn" type="button" @click="search">查询</button>
      <button class="btn" type="button" @click="clear">清空</button>
    </div>

    <table>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>头像</th>
        <th>性别</th>
        <th>职位</th>
        <th>入职时间</th>
        <th>更新时间</th>
      </tr>

      <!-- v-for 用于列表循环渲染元素 -->
      <tr v-for="(user, index) in userList" :key="user.id">
        <td>{{ index + 1 }}</td>
        <td>{{ user.name }}</td>
        <td><img :src="user.image" /></td>
        <td>
          <span v-if="user.gender == 1">男</span>
          <span v-else-if="user.gender == 2">女</span>
          <span v-else>其他</span>
        </td>
        <td>
          <span v-if="user.job == 1">班主任</span>
          <span v-else-if="user.job == 2">讲师</span>
          <span v-else-if="user.job == 3">学工主管</span>
          <span v-else-if="user.job == 4">教研主管</span>
          <span v-else-if="user.job == 5">咨询师</span>
          <span v-else>其他</span>
        </td>
        <td>{{ user.entrydate }}</td>
        <td>{{ user.updatetime }}</td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
/* 样式 针对当前组件生效*/
table,
th,
td {
  border: 1px solid #949191;
  border-collapse: collapse;
  line-height: 50px;
  text-align: center;
}

#center,
table {
  width: 60%;
  margin: auto;
}

#center {
  margin-top: 50px;
  margin-bottom: 20px;
}

img {
  width: 50px;
}

input,
select {
  width: 17%;
  padding: 10px;
  margin-right: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn {
  background-color: #08dcf3;
  padding: 8px 30px;
  margin-right: 10px;
  border-radius: 8px;
  border: #08dcf3 solid 1px;
}
</style>
